<template>
  <div class="main">
    <p class="main_text">商户订单管理</p>
    <!-- 搜索 -->
    <div class="g-search" ref="searchBox">
      <!-- 时间选择区域 -->
      <span class="demonstration">提交时间：</span>
      <el-date-picker
        v-model="searchValue.startAt"
        type="date"
        placeholder="开始时间"
        @change="startTime"
        :clearable="false"
        :default-time="defaultTime(0, 0, 0)" />
      <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px">至</span>
      <el-date-picker
        v-model="searchValue.endAt"
        type="date"
        placeholder="结束时间"
        @change="endTime"
        :clearable="false"
        :default-time="defaultTime1(23, 59, 59)" />
      &emsp;
      <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
        <el-radio label="1" size="large">今天</el-radio>
        <el-radio label="2" size="large">近7天</el-radio>
        <el-radio label="3" size="large">近30天</el-radio>
        <el-radio label="4" size="large">近3个月</el-radio>
      </el-radio-group>
      <!-- 信息区域 -->
      <div class="all_select">
        <!-- 店铺ID -->
        <div class="input_valye">
          <span class="demonstration">店铺ID：</span>
          <input
            type="text"
            class="input"
            style="width: 200px"
            placeholder="请输入店铺ID"
            v-model="searchValue.shopId"
            @keyup.enter="search" />
        </div>
        <!-- 店铺名称： -->
        <div class="input_valye">
          <span class="demonstration">店铺名称：</span>
          <input
            type="text"
            class="input"
            style="width: 200px"
            placeholder="请输入店铺名称"
            v-model="searchValue.shopName"
            @keyup.enter="search" />
        </div>
        <!-- 订单编号 -->
        <div class="input_valye">
          <span class="demonstration">订单编号：</span>
          <input
            type="text"
            class="input"
            style="width: 200px"
            placeholder="请输入商品名称"
            v-model="searchValue.orderSn"
            @keyup.enter="search" />
        </div>
      </div>
      <!-- 底部按钮区域 -->
      <div class="bottom_btn">
        <el-button class="solid" @click="search">查询</el-button>
        <el-button class="hollow" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table cyr-flex">
      <!-- 表格导航栏 -->
      <div class="nav">
        <ul class="nav_ul">
          <li v-for="(item, index) in nav_list" :key="index" :class="item.class" @click="navChange(item)">
            <span class="nav_lis">{{ item.text }}</span>
          </li>
        </ul>
      </div>
      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        :header-cell-style="{'text-align': 'center'}"
        :row-class-name="tableRowClassName"
        :show-overflow-tooltip="true"
        v-adaptive
        border>
        <el-table-column type="selection" width="40" />
        <el-table-column prop="shopId" label="店铺ID" align="center" />
        <el-table-column prop="shopName" label="店铺名称" align="center">
          <template #default="props">
            <el-text tag="span" style="cursor: pointer" @click="look(props.row)">{{ props.row.shopName }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户ID" align="center" />
        <el-table-column prop="orderSn" label="订单编号" align="center" />
        <el-table-column prop="createdAt" label="提交时间" align="center" />
        <el-table-column prop="updatedAt" label="更新时间" align="center" />
        <el-table-column prop="price" label="订单金额" align="center">
          <template #default="item">
            {{ item.row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="payMethod" label="支付方式" align="center">
          <template #default="item">
            <span v-if="item.row.payMethod == 0">银行卡</span>
            <span v-else-if="item.row.payMethod == 1">支付宝</span>
            <span v-else-if="item.row.payMethod == 2">微信</span>
            <span v-else>钱包余额</span>
          </template>
        </el-table-column>
        <el-table-column prop="deviceInfo" label="订单来源" align="center" />
        <el-table-column
          prop="status"
          label="订单状态"
          width="100"
          align="center"
          :formatter="(statusFormatter as any)" />
        <el-table-column label="操作" class="operation" :show-overflow-tooltip="false">
          <template #default="item">
            <el-button size="small" class="none" @click="look(item.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <smartPager
        v-model:current-page="searchValue.page"
        v-model:page-size="searchValue.rows"
        :total="total"
        @change="pageChange" />
    </div>
    <!-- 查看订单 -->
    <el-drawer
      v-model="orderShow"
      class="order"
      size="700px"
      style="position: absolute !important; z-index: 40 !important"
      :z-index="70">
      <div class="box fristbox">
        <div class="title">
          <img src="@/assets/images/shop/goods/贴纸.png" alt="" class="photo" />
          <div class="right">
            <el-steps
              :active="orderAllMes.order.status == 3 ? 5 : statusShow + 1"
              align-center
              finish-status="success"
              v-if="statusShow !== 4">
              <el-step title="提交订单" :description="orderAllMes.order.createdAt" />
              <el-step title="支付订单" :description="orderAllMes.order.payTime" v-if="orderAllMes.order.status > 0" />
              <el-step title="支付订单" description="未支付" v-else />
              <el-step title="平台发货" description="已发货" v-if="orderAllMes.order.status > 1" />
              <el-step title="平台发货" description="未发货" v-else />
              <el-step title="确认收货" description="已收货" v-if="orderAllMes.order.status > 2" />
              <el-step title="确认收货" description="未收货" v-else />
              <el-step title="交易完成" description="等待评价" v-if="orderAllMes.order.status == 5" />
              <el-step title="交易完成" description="已完成" v-else-if="orderAllMes.order.status == 3" />
              <el-step title="交易完成" description="未完成" v-else />
            </el-steps>
            <el-steps :active="1" align-center class="close_order" finish-status="success" v-else>
              <el-step title="提交订单" :description="orderAllMes.order.createdAt" />
              <el-step title="已关闭" description="2023-07-19 15:14:12" :icon="CircleClose" />
            </el-steps>
            <!-- 待付款 -->
            <div class="text" v-if="statusShow === 0">
              <div class="shop">
                等待买家付款
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
              <p class="text1">
                若买家未付款，订单将会在 <span class="time">01</span>天<span class="time">15</span>小时<span
                  class="time"
                  >36</span
                >分钟&nbsp;&nbsp;后关闭
              </p>
            </div>
            <!-- 待发货 -->
            <div class="text" v-if="statusShow === 1">
              <div class="shop">
                等待商家发货
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
              <p class="text1">
                买家已付款，请在 <span class="time">01</span>天<span class="time">15</span
                >小时&nbsp;&nbsp;内发货，超时可能会判罚
              </p>
              <div class="btn1">
                <el-button class="solid" @click="deliverAll('Single')">发货</el-button>
                <el-button class="hollow" @click="cancledeliver">取消订单</el-button>
              </div>
            </div>
            <!-- 待收货 -->
            <div class="text" v-if="statusShow === 2">
              <div class="shop">
                等待买家收货
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
              <p class="text1">
                商家已发货，订单将在<span class="time">01</span>天<span class="time">15</span
                >小时&nbsp;&nbsp;后自动确认收货
              </p>
            </div>
            <!-- 已完成 -->
            <div class="text" v-if="statusShow === 3">
              <div class="shop">
                订单已完成
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
            </div>
            <!-- 已关闭 -->
            <div class="text">
              <div class="shop" v-if="statusShow === 4">
                订单已关闭
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
            </div>
            <!-- 待付款 -->
            <div class="text" v-if="statusShow === 0">
              <div class="shop">等待买家付款</div>
              <p class="text1">
                若买家未付款，订单将会在 <span class="time">01</span>天<span class="time">15</span>小时<span
                  class="time"
                  >36</span
                >分钟&nbsp;&nbsp;后关闭
              </p>
            </div>
            <!-- 待发货 -->
            <div class="text" v-if="statusShow === 1">
              <div class="shop">等待商家发货</div>
              <p class="text1">
                买家已付款，请在 <span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                  >36</span
                >分钟&nbsp;&nbsp;内发货，超时可能会判罚
              </p>
            </div>
            <!-- 待收货 -->
            <div class="text" v-if="statusShow === 2">
              <div class="shop">等待买家收货</div>
              <p class="text1">
                商家已发货，订单将在<span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                  >36</span
                >分钟&nbsp;&nbsp;后自动确认收货
              </p>
            </div>
            <!-- 已完成 -->
            <div class="text" v-if="statusShow === 3">
              <div class="shop">订单已完成</div>
            </div>
            <!-- 已关闭 -->
            <div class="text">
              <div class="shop" v-if="statusShow === 4">订单已关闭</div>
            </div>
          </div>
        </div>
        <div class="mes">
          <div class="info1">订单编号：{{ orderAllMes.order.orderSn }}</div>
          <div class="info1">用户可得积分：{{ orderAllMes.order.integral }}</div>
          <div class="info1">提交时间：{{ orderAllMes.order.createdAt }}</div>
          <div class="info1">订单来源：{{ orderAllMes.order.deviceInfo }}</div>
          <div class="info1">活动信息：{{ orderAllMes.order.deviceInfo }}</div>
        </div>
      </div>
      <!-- 订单相关信息 -->
      <div class="box">
        <div class="user_play">
          <div class="title">
            <div class="box1"></div>
            <span class="name">收货人信息</span>
          </div>
          <div class="row">
            <span class="name1">收货人：{{ orderAllMes.order.addressInfo.receiver }}</span>
          </div>
          <div class="row">
            <span class="name1">联系电话：{{ orderAllMes.order.addressInfo.phone }}</span>
          </div>
          <div class="row">
            <span class="name1"
              >收货地址：{{ orderAllMes.order.addressInfo.area }}{{ orderAllMes.order.addressInfo.address }}</span
            >
          </div>
        </div>
        <div class="user_play">
          <div class="title">
            <div class="box1"></div>
            <span class="name">付款信息</span>
          </div>
          <div class="row">
            <span class="name1">付款金额：{{ orderAllMes.order.price }}</span>
          </div>
          <div class="row">
            <span class="name1"
              >付款方式：<span v-if="orderAllMes.order.payMethod == 0">银行卡</span
              ><span v-else-if="orderAllMes.order.payMethod == 1">微信</span
              ><span v-else-if="orderAllMes.order.payMethod == 2">支付宝</span><span v-else>钱包余额</span></span
            >
          </div>
          <div class="row">
            <span class="name1">付款时间：{{ orderAllMes.order.payTime }}</span>
          </div>
        </div>
        <div class="user_play">
          <div class="title">
            <div class="box1"></div>
            <span class="name">配送信息</span>
          </div>
          <div class="row">
            <span class="name1"
              >配送状态：<span v-if="orderAllMes.logistics != null">已发货</span><span v-else>未发货</span></span
            >
          </div>
          <div class="row">
            <span class="name1"
              >物流单号：<span v-if="orderAllMes.logistics != null">{{ orderAllMes.logistics.logisticSn }}</span
              ><span v-else>-</span></span
            >
          </div>
        </div>
      </div>
      <!-- 物流信息 -->
      <div class="box" v-if="orderAllMes.logisticInfo">
        <div class="head_title">
          <div class="box1"></div>
          物流信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="logistics"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column type="expand">
            <template #default="props">
              <div class="logistics">
                <el-timeline>
                  <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time">
                    {{ activity.context }}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="company" label="物流公司" align="center" />
          <el-table-column prop="logisticSn" label="物流单号" align="center" />
          <el-table-column prop="status" label="物流状态" align="center">
            <template #default="props">
              <span v-if="props.row.status == 2">已收货</span>
              <span v-else>已发货</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 发票信息 -->
      <div class="box" v-if="orderAllMes.invoice != null">
        <div class="head_title">
          <div class="box1"></div>
          发票信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="invoice"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="type" label="发票类型" width="100" align="center" />
          <el-table-column prop="riseType" label="发票抬头类型" width="160" align="center" />
          <el-table-column prop="invoiceHeader" label="发票类型" width="100" align="center" />
          <el-table-column prop="content" label="发票内容" width="100" align="center" />
          <el-table-column prop="phone" label="收票人手机" width="100" align="center" />
          <el-table-column prop="email" label="收票人邮箱" width="100" align="center" />
        </el-table>
      </div>
      <!-- 商品信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          商品信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="product"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column label="商品图片" width="100" align="center">
            <template #default="item">
              <el-image
                :preview-src-list="[item.row.mainImgUrl]"
                :src="item.row.mainImgUrl"
                style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="160" align="center" />
          <el-table-column prop="salePrice" label="售价" width="100" align="center" />
          <el-table-column prop="dealPrice" label="议价" width="100" align="center" />
          <el-table-column prop="orderQuantity" label="数量" width="100" align="center" />
          <el-table-column prop="skuName" label="属性" width="100" align="center" />
          <el-table-column prop="note" label="备注" width="200" align="center">
            <template #default="item">
              <el-input
                v-model="item.row.note"
                rows="3"
                type="textarea"
                :disabled="item.row.disabled"
                v-if="item.row.note != null || !item.row.disabled" />
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="小计" width="100" align="center"> </el-table-column>
          <el-table-column label="操作" width="180" align="center" v-if="statusShow === 0">
            <template #default="item">
              <el-button size="small" class="deposit" v-show="item.row.disabled" @click="orderEdit(item.row)"
                >修改</el-button
              >
              <el-button size="small" class="deposit" v-show="!item.row.disabled" @click="orderSure(item.row)"
                >确认</el-button
              >
              <el-button size="small" class="deposit" v-show="!item.row.disabled" @click="orderCancle(item.row)"
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 费用信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          费用信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="cost"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="price" label="商品合计" align="center" />
          <el-table-column prop="transportFee" label="运费" align="center" />
          <el-table-column prop="districtMoney" label="优惠金额" width="100" align="center" />
          <el-table-column prop="price" label="实际应付金额" align="center" />
        </el-table>
      </div>
      <!-- 操作信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          操作信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="Operation"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="adminId" label="操作者" align="center" />
          <el-table-column prop="createdAt" label="操作时间" width="170" align="center" />
          <el-table-column prop="orderStatus" label="订单状态" align="center" />
          <el-table-column prop="note" label="备注" align="center">
            <template #default="item">
              <span v-if="item.row.note == ''">-</span>
              <span v-else>{{ item.row.note }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {RequestOrderLook, RequestOrderOperation, RequestSynthesizeOrder} from '@/api/path/index.js';
import {Message, CircleClose} from '@element-plus/icons-vue';
import moment from 'moment';
import {ElMessage} from 'element-plus';
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
const orderShow = ref(false); //控制查看订单显示
const order = ref<any>([]); //订单数组
const radio = ref('');
interface RestaurantItem {
  value: string;
  link: string;
}
const consolidateOrder = ref<any>([]);
const restaurants = ref<RestaurantItem[]>([]);
const loadAll = () => {
  return consolidateOrder.value;
};

const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
/**
 * 表格颜色区分
 */
const tableRowClassName = ({row, rowIndex}: any) => {
  if (rowIndex % 2 !== 0) {
    return 'warning-row';
  }
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestSynthesizeOrder();
};
// 挂载
onMounted(() => {
  requestSynthesizeOrder();
  restaurants.value = loadAll();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
  console.log('Search Box height11111111111111111111111111111:', searchBoxHeight);
};
/**
 * 获取订单信息
 */
const unpaid = ref(0);
const undeliver = ref(0);
const unreceiv = ref(0);
const finish = ref(0);
const allclose = ref(0);
/**
 * 表格导航列表
 */
const nav_list = ref([
  {
    class: ['navlist', 'nav_li'],
    text: '全部',
    status: '',
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '待支付',
    status: 0,
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '待发货',
    status: 1,
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '待收货',
    status: 2,
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '签收完成',
    status: 3,
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '已关闭',
    status: 4,
    num: 0,
  },
]);
const requestSynthesizeOrder = async () => {
  const a = await RequestSynthesizeOrder(searchValue.value);
  tableData.value = a.resultObj.orders;
  total.value = a.resultObj.totalCount;
  nav_list.value[0]=a.resultObj.totalCount.
  nav_list.value[1]=a.resultObj.orderStatusCount.waitPay
  nav_list.value[2]=a.resultObj.orderStatusCount.waitSend
  nav_list.value[3]=a.resultObj.orderStatusCount.waitAccept
  nav_list.value[4]=a.resultObj.orderStatusCount.finish
  nav_list.value[5]=a.resultObj.orderStatusCount.close
};
const adminId = JSON.parse(localStorage.getItem('roleInfo') as string).id;
/**
 * 表格导航点击事件
 */
const navChange = (item: any) => {
  for (let i = 0; i < nav_list.value.length; i++) {
    const filteredClasses = nav_list.value[i].class.filter((className) => className !== 'navlist');
    nav_list.value[i].class = filteredClasses;
  }

  item.class.push('navlist');
  searchValue.value.status = item.status;
  searchValue.value.page = 1;
  requestSynthesizeOrder();
};
// 搜索参数
const searchValue = ref({
  shopId: '',
  shopName: '',
  orderSn: '',
  status: '',
  startAt: '',
  endAt: '',
  page: 1,
  rows: 10,
});
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startAt = '';
  searchValue.value.endAt = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  if (radio.value === '1') {
    searchValue.value.startAt = moment(now).format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startAt = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startAt = moment(now).subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startAt = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  }
  search();
};
// 开始时间
const startTime = () => {
  radio.value = '0';
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  search();
};
// 结束时间
const endTime = () => {
  radio.value = '0';
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  search();
};
/**
 * 搜索
 */
const search = async () => {
  // 判断开始时间不能早于当前时间
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    // 判断是否两个时间都填写了
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        searchValue.value.page = 1;
        requestSynthesizeOrder();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      searchValue.value.page = 1;
      requestSynthesizeOrder();
    }
  }
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    shopId: '',
    shopName: '',
    orderSn: '',
    status: '',
    startAt: '',
    endAt: '',
    page: 1,
    rows: 10,
  };
  radio.value = '0';

  requestSynthesizeOrder();
};
/**
 * 表格复选框选中事件
 */
const handleSelectionChange = (selection: any) => {
  order.value = [];
  for (let x = 0; x < tableData.value.length; x++) {
    tableData.value[x].selection = false;
  }
  for (let i = 0; i < selection.length; i++) {
    selection[i].selection = true;
    order.value.push(selection[i]);
  }
};
/**
 * 通过返回的status返回对应的状态
 */
const statusFormatter = (row: any) => {
  if (row.status === 0) {
    return '待支付';
  }
  if (row.status === 1) {
    return '待发货';
  }
  if (row.status === 2) {
    return '待收货';
  }
  if (row.status === 3) {
    return '签收完成';
  }
  if (row.status === 4) {
    return '已关闭';
  }
};
/**
 * 点击查看
 */
const logisticInfo = ref<any>([]);
const logistics = ref<any>([]);
const orderArray = ref<any>([]);
const product = ref<any>([]);
const user = ref<any>([]);
const invoice = ref<any>([]); //发票信息
const statusShow = ref(0);
const cost = ref<any>([]);
const activities = ref<any>([]); //时间线
const cost1 = ref({
  orderId: 0,
  type: 0,
  adminId: adminId,
  price: '',
  transportFee: '',
  districtMoney: '',
  reality: '',
  note: '',
});
const Operation = ref<any>([]);

const orderAllMes = ref<any>();

/**
 * 点击查看
 */
const look = async (item: any) => {
  order.value[0] = item;
  console.log('发货数组', order.value);
  // 获取当前订单状态
  statusShow.value = item.status;
  console.log('获取当前订单状态', statusShow.value);
  // 获取所有信息
  const a = await RequestOrderLook(item.id);
  console.log('订单信息', a.resultObj);
  orderAllMes.value = a.resultObj;
  orderAllMes.value.order.addressInfo = JSON.parse(orderAllMes.value.order.addressInfo.value);
  // 获取订单物流单号，公司等
  if (a.resultObj.logistics) {
    logistics.value = [
      {
        logisticSn: a.resultObj.logistics.logisticSn,
        status: a.resultObj.logistics.status,
        company: a.resultObj.logistics.company,
      },
    ];
    console.log('查看物流数组', logistics.value);
  }
  // orderAllMes.value.order = a.resultObj.order
  // product.value = a.resultObj.orderProducts
  for (let i = 0; i < a.resultObj.orderProducts.length; i++) {
    const allPrice = a.resultObj.orderProducts[i].quantity * a.resultObj.orderProducts[i].finalPrice;
    console.log('11111111111111111111111222', allPrice);

    product.value[i] = {
      skuId: a.resultObj.orderProducts[i].skuId,
      id: a.resultObj.orderProducts[i].product.id,
      mainImgUrl: a.resultObj.orderProducts[i].product.pics[0].url,
      name: a.resultObj.orderProducts[i].product.name,
      salePrice: a.resultObj.orderProducts[i].product.salePrice,
      dealPrice: a.resultObj.orderProducts[i].finalPrice,
      orderQuantity: a.resultObj.orderProducts[i].quantity,
      skuName: a.resultObj.orderProducts[i].skuName,
      price: allPrice,
      // refundPrice: AfterSaleList.value.afterSale.refundPrice,
      description: a.resultObj.orderProducts[i].description,
      imgs: a.resultObj.orderProducts[i].imgs,
      note: a.resultObj.orderProducts[i].note,
      disabled: true,
    };
  }
  console.log('备注', product.value);

  // // 判断是否有发票信息
  // if (a.resultObj.invoice !== null) {
  //     invoice.value = [
  //         {
  //             type: a.resultObj.invoice.type,
  //             riseType: a.resultObj.invoice.riseType,
  //             invoiceHeader: a.resultObj.invoice.invoiceHeader,
  //             content: '商品明细',
  //             phone: a.resultObj.invoice.phone,
  //             email: a.resultObj.invoice.email,
  //         },
  //     ]
  //     // 处理发票信息回显发票类型
  //     if (a.resultObj.invoice.type === 0) {
  //         invoice.value[0].type = '普票'
  //     } else {
  //         invoice.value[0].type = '专票'
  //     }
  //     if (a.resultObj.invoice.riseType === 0) {
  //         invoice.value[0].riseType = '个人'
  //     } else {
  //         invoice.value[0].riseType = '单位'
  //     }
  // }
  // 处理物流信息
  if (a.resultObj.logisticInfo !== null) {
    logisticInfo.value = JSON.parse(a.resultObj.logisticInfo.replace(', error=null)', ' '));
    activities.value = logisticInfo.value.data;
    console.log('处理物流信息', logisticInfo.value);
  }
  // orderAllMes.value.order.receiver = a.resultObj.receiver
  // orderAllMes.value.order.receiverAddress = a.resultObj.receiverAddress
  // // 处理支付方式
  // if (orderAllMes.value.order.payMethod === 0) {
  //     orderAllMes.value.order.payMethod = '支付宝'
  // } else if (orderAllMes.value.order.payMethod === 1) {
  //     orderAllMes.value.order.payMethod = '微信'
  // } else {
  //     orderAllMes.value.order.payMethod = '银行卡'
  // }

  // // 处理发货状态
  // if (item.status <= 1) {
  //     logisticInfo.value.status = '未发货'
  // } else {
  //     logisticInfo.value.status = '已发货'
  // }
  // const reality = orderAllMes.value.order.quantity * product.value.salePrice
  // const reality1 = reality.toString().match(/\d+\.\d{2}/)
  // 处理商品费用
  cost.value = [
    {
      price: orderAllMes.value.order.price,
      transportFee: 0,
      districtMoney: 0,
      note: '',
    },
  ];
  // cost1.value = {
  //     orderId: orderAllMes.value.order.id,
  //     type: 0,
  //     adminId: adminId,
  //     price: cost.value[0].price,
  //     transportFee: cost.value[0].transportFee,
  //     districtMoney: cost.value[0].districtMoney,
  //     reality: cost.value[0].reality,
  //     note: cost.value[0].note,
  // }
  // 获取操作日志
  const b = await RequestOrderOperation(orderAllMes.value.order.id);
  Operation.value = b.resultObj;
  console.log('操作日志', Operation.value);
  Operation.value = b.resultObj;
  // 显示组件
  orderShow.value = true;
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.table {
  height: calc(100% - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  height: calc(100% - 100px) !important;
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}

.photoBox {
  width: 148px;
  height: 148px;
  border-radius: 5px;
  border: 1px dashed var(--el-border-color-darker);
  background: #fafafa;
  position: relative;

  .el-icon {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -10px;
    font-size: 20px;
  }
}

.nav_ul {
  width: 100%;

  .nav_li {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav_lis {
    position: relative;
    cursor: pointer;

    .number {
      padding: 0 5px;
      display: block;
      line-height: 16px;
      height: 16px;
      color: #fff;
      font-size: 12px;
      background: #409eff;
      border-radius: 8px;
      position: absolute;
      top: 2px;
      right: -12px;
    }
  }

  .navlist {
    .number {
      background: #409eff;
      color: #fff;
    }
  }
}

.btn {
  width: 150px;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

:deep(.el-input__wrapper) {
  width: 150px;
}

:deep(.el-drawer.rtl) {
  background: #f5f9ff;
  width: 750px !important;
}

:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

:deep(.el-drawer__header) {
  margin: 0;
}

:deep(.is-process) {
  color: #409eff;
}

:deep(.is-process .el-step__icon.is-text) {
  border: 2px solid #409eff;
  background: #409eff;
  color: #fff;
}

:deep(.is-finish .el-step__line) {
  background: #409eff;
}

.close_order :deep(.is-process) {
  color: #f57373;
}

.close_order :deep(.is-process .el-step__icon.is-text) {
  border: 2px solid #f57373;
  background: #fff;
}

.close_order :deep(.is-finish .el-step__line) {
  background: #f57373;
}

.el-table .warning-row {
  background: #44a2ff !important;
}

/**
 * 查看订单
 */
.order {
  .box {
    width: 96%;
    padding: 20px;
    background: #ffffff;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;

    .title {
      width: 100%;
      display: flex;
      border-bottom: 1px solid #edf0f4;

      .photo {
        width: 100px;
        height: 100px;
      }

      .right {
        flex: 1;

        .flow {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;

          .step {
            width: 90px;
            height: 90px;
            text-align: center;
            font-size: 14px;
            color: #adadad;

            .el-icon {
              font-size: 25px;
            }

            .number {
              width: 23px;
              height: 23px;
              border-radius: 50%;
              line-height: 20px;
              text-align: center;
              margin: 0 auto;
              margin-bottom: 5px;
              border: 2px solid #adadad;
            }

            .step_time {
              font-size: 12px;
              margin-top: 5px;
            }
          }

          .line {
            width: 50px;
            height: 2px;
            background: #ebedf1;
          }

          .finish_line {
            background: #70b7ff;
          }

          .finish {
            color: #409eff;

            .step_time {
              color: #82c0ff;
            }
          }

          .current1 {
            color: #409eff;

            .number {
              border: 0;
              background: #409eff;
              color: #fff;
              line-height: 23px;
            }
          }
        }

        .text {
          width: 100%;
          margin: 10px 0 25px 0;

          .shop {
            width: 100%;
            height: 30px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #3d3d3d;
            font-weight: bold;
            margin-top: 20px;

            .plat_mes {
              font-size: 14px;
              color: #ababab;
              display: flex;
              align-items: center;
            }

            .el-icon {
              color: #000000;
              font-size: 20px;
            }
          }

          .time {
            display: inline-block;
            padding: 5px;
            background: #f5f9ff;
            color: #409eff;
          }

          .text1 {
            font-size: 14px;
            color: #ababab;
          }
        }
      }
    }

    .mes {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .info1 {
        width: 195px;
        font-size: 14px;
        color: #797979;
        margin-top: 15px;
      }

      .addremark {
        display: inline-block;
        color: #116cf8;
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .user_play {
      width: 190px;
      font-size: 14px;

      .box1 {
        width: 3px;
        height: 15px;
        border: 0;
        background: #116cf8;
        margin-right: 10px;
      }

      .name {
        font-weight: bold;
        font-size: 15px;
      }

      .title {
        display: flex;
        border: 0;
        align-items: center;
        font-size: 15px;
        margin-bottom: 15px;
      }

      .row {
        margin-top: 5px;

        .name1 {
          color: #b8b8b8;
        }
      }
    }

    .head_title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 15px;
      font-weight: bold;

      .box1 {
        width: 3px;
        height: 20px;
        background: #116cf8;
        margin-right: 10px;
      }
    }

    .logistics {
      margin-top: 20px;
    }

    .deposit {
      background: #fff;
      border: 0px;
      color: #409eff;
    }
  }

  .fristbox {
    margin-top: 0px;
  }
}
</style>
